<template>
  <div class="not-found-container">
    <!-- 使用 Element Plus 的图片容器 -->
    <el-empty description=" " :image="notFoundImage" :image-size="400">
      <template #description>
        <div class="text-container">
          <h1 class="title">哎呀，页面迷路了~</h1>
          <p class="tip">
            将在 {{ countdown }} 秒后自动跳转到
            <router-link to="/home" class="link">首页</router-link>
          </p>
        </div>
      </template>
    </el-empty>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import notFoundImage from '@/assets/404.png'

const router = useRouter()
const countdown = ref(5)

let timer = null

// 倒计时逻辑
const startCountdown = () => {
  timer = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--
    } else {
      clearInterval(timer)
      router.push('/home')
    }
  }, 1000)
}

onMounted(() => {
  startCountdown()
})

onBeforeUnmount(() => {
  clearInterval(timer)
})
</script>

<style scoped>
.not-found-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
}

.text-container {
  text-align: center;
}

.title {
  font-size: 24px;
  color: #666;
  margin-bottom: 20px;
}

.tip {
  font-size:px;
  color: #909399;
}

.link {
  color: #409eff;
  text-decoration: none;
  margin-left: 5px;
}

.link:hover {
  text-decoration: underline;
}
</style>